<template>
  <div class="container">
    <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="54px">
      <x-header class="my-header"  title="app下载" ></x-header>
      <div style="height: 100%;">
        <div class="contain" >
          <img src="../assets/background.jpg"/>
          <div class="buttonContain">
            <div class="buttonContain_user">
              <span>用户端下载</span>
              <x-button :gradients="['#1D62F0', '#19D5FD']" @click.native="getUserDownload()">{{buttonValue}}</x-button>
            </div>
          </div>
        </div>

        <divider>下载二维码</divider>
        <qrcode :value="value" style="text-align: center" ></qrcode>
        <divider>微信公众号</divider>
        <img src="../assets/weixin.jpg" style="width: 50%;margin: 0 auto;" width="30%"/>
      </div>
    </view-box>
  </div>
</template>

<script>
  import {Divider, Qrcode ,Tabbar, TabbarItem,Drawer,ViewBox,Toast,Countdown, Box, XInput, Group, XButton, Cell,XHeader, Actionsheet, TransferDom, ButtonTab, ButtonTabItem } from 'vux'
  export default {
    data (){
      return {
        buttonValue:'',
        phoneSystem:'',    //判断手机系统，true为安卓，false为苹果
        value:''
      }
    },
    mounted(){
      this.showPhone();
      document.setTitle = function(t) {
        document.title = t;
        var i = document.createElement('iframe');
        i.src = '//m.baidu.com/favicon.ico';
        i.style.display = 'none';
        i.onload = function() {
          setTimeout(function(){
            i.remove();
          }, 9)
        }
        document.body.appendChild(i);
      }
      document.setTitle('Hello护士');
    },
    methods:{
      getUserDownload(){
        if(this.phoneSystem=='isAndroid'){
          window.location.href='http://openbox.mobilem.360.cn/index/d/sid/3911097'
        }else if(this.phoneSystem=='isiOS'){
          window.location.href='https://itunes.apple.com/cn/app/id1286941523?mt=8';
        }
        else{
          this.$message({
            message:'请使用移动端设备下载',
            type:'error'
          })
        }
      },
      showPhone(){
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if(isAndroid){
          this.phoneSystem='isAndroid';
          this.value='http://openbox.mobilem.360.cn/index/d/sid/3911097'
          this.buttonValue='点击下载';
        }else if(isiOS){
          this.phoneSystem='isiOS';
          this.value='https://itunes.apple.com/cn/app/id1286941523?mt=8'
          this.buttonValue='进入苹果市场'
        }
      }
    },
    components: {
      Qrcode,Divider,
      Tabbar, TabbarItem,Drawer,ViewBox,Toast,
      Countdown,
      XButton,
      Box,
      XInput,
      Group,
      Cell,
      XHeader,
      Actionsheet,
      ButtonTab,
      ButtonTabItem
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  img{  width: 100%; height: auto;max-width: 100%; display: block;  }
  .buttonLink{
    width: 100%;
    height: 70px;
    font-size: 28px;
  }
  .buttonContain_user{
    display: inline-block;
    position: relative;
    width: 40%;
    height: 70px;
    text-align: center;
    left:30%;
  }
  .buttonContain_nurse{
    display: inline-block;
    position: relative;
    width: 30%;
    height: 70px;
    font-size: 28px;
    left:30%;
  }
  .buttonContain{
    width: 100%;
    margin: 0 auto;
  }

  .my-header {
    position: fixed;
    height: 46px;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
    background-color: rgb(255, 104, 140)
  }
  .center {
    display: block;
    margin: 0 auto;
    text-align: center;

    border-radius: 10px 10px 10px 10px;
    height: 75px;
    width: 75px;
  }
  .weui-cells_form{
    padding-top: 50px;
    width: 95%;
    margin: 0 auto;
  }
  #tabbar{
    position: fixed;
  }
</style>
